{% extends "base.html" %}
{% load static %}
{% load widget_tweaks %}

{% block title %}{% if form.instance.pk %}编辑数据源{% else %}添加数据源{% endif %}{% endblock %}

{% block content %}
<div class="container">
    <div class="row">
        <div class="col-md-8 offset-md-2">
            <div class="card">
                <div class="card-header">
                    <h4 class="mb-0">
                        {% if form.instance.pk %}
                            <i class="bi bi-pencil-square"></i> 编辑数据源
                        {% else %}
                            <i class="bi bi-plus-circle"></i> 添加数据源
                        {% endif %}
                    </h4>
                </div>
                <div class="card-body">
                    <form method="post" class="needs-validation" novalidate>
                        {% csrf_token %}
                        
                        {% for field in form %}
                        <div class="mb-3">
                            <label for="{{ field.id_for_label }}" class="form-label">
                                {{ field.label }}
                                {% if field.field.required %}
                                    <span class="text-danger">*</span>
                                {% endif %}
                            </label>
                            
                            {% if field.name == 'type' %}
                                {% render_field field class="form-select" %}
                            {% else %}
                                {% render_field field class="form-control" %}
                            {% endif %}
                            
                            {% if field.help_text %}
                            <div class="form-text text-muted">
                                {{ field.help_text }}
                            </div>
                            {% endif %}
                            
                            {% if field.errors %}
                            <div class="invalid-feedback d-block">
                                {% for error in field.errors %}
                                    {{ error }}
                                {% endfor %}
                            </div>
                            {% endif %}
                        </div>
                        {% endfor %}

                        <div class="d-flex justify-content-between align-items-center mt-4">
                            <a href="{% url 'datasource_list' %}" class="btn btn-secondary">
                                <i class="bi bi-arrow-left"></i> 返回列表
                            </a>
                            <button type="submit" class="btn btn-primary">
                                <i class="bi bi-save"></i> 保存数据源
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            {% if form.instance.pk %}
            <div class="card mt-4">
                <div class="card-header bg-light">
                    <h5 class="mb-0">
                        <i class="bi bi-info-circle"></i> 连接说明
                    </h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <h6>OPC UA 连接字符串格式：</h6>
                        <code>opc.tcp://host:port/path</code>
                        <p class="mt-2 mb-0 text-muted">示例：opc.tcp://localhost:4840/freeopcua/server/</p>
                    </div>
                    <div>
                        <h6>MQTT 连接字符串格式：</h6>
                        <code>mqtt://[username[:password]@]host[:port]</code>
                        <p class="mt-2 mb-0 text-muted">示例：mqtt://user:pass@localhost:1883</p>
                    </div>
                </div>
            </div>
            {% endif %}
        </div>
    </div>
</div>

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // 表单验证
    const forms = document.querySelectorAll('.needs-validation');
    Array.from(forms).forEach(form => {
        form.addEventListener('submit', event => {
            if (!form.checkValidity()) {
                event.preventDefault();
                event.stopPropagation();
            }
            form.classList.add('was-validated');
        }, false);
    });

    // 数据源类型切换时更新连接字符串的帮助文本
    const typeSelect = document.getElementById('id_type');
    const connectionStringInput = document.getElementById('id_connection_string');
    
    function updateHelpText() {
        const helpText = typeSelect.value === 'opcua' 
            ? 'OPC UA 连接字符串格式：opc.tcp://host:port/path'
            : 'MQTT 连接字符串格式：mqtt://[username[:password]@]host[:port]';
        
        let helpDiv = connectionStringInput.nextElementSibling;
        if (!helpDiv || !helpDiv.classList.contains('form-text')) {
            helpDiv = document.createElement('div');
            helpDiv.className = 'form-text text-muted';
            connectionStringInput.parentNode.insertBefore(helpDiv, connectionStringInput.nextSibling);
        }
        helpDiv.textContent = helpText;
    }

    if (typeSelect && connectionStringInput) {
        typeSelect.addEventListener('change', updateHelpText);
        updateHelpText(); // 初始化时设置帮助文本
    }
});
</script>
{% endblock %}
{% endblock %} 